<template>
  <div class="bet-card">
    <div class="mask-bet" v-if="type === hideMaskType"></div>
    <div class="bet-title">
      <span>{{ title }}</span>
      <i></i>
    </div>

    <div class="bet-content">
      <div class="quick-select" :class="showSelect ? 'show' : ''">
        <div class="show-btn" @click="toggleSelect">
          <b />
          <b />
          <b />
        </div>
        <ul>
          <li
            v-for="(item, index) in quickSelects"
            :key="`number-${index}`"
            :class="{ active: item === currentType }"
            @click="handelQuickSelect(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <ul class="number">
        <li
          v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
          :key="`number-${index}`"
          :class="{ active: selectedNumber.includes(item) }"
          @click="changeSelectNumber(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { findIndex } from 'lodash-es'
export default {
  name: 'Bet-Card',
  props: {
    title: {
      default: '',
      type: String,
    },

    type: {
      default: '',
      type: String,
    },
    dwcount: {
      type: Number,
      default: 5,
    },
    betInfo: {
      type: Object,
      default: () => {},
    },
    hideMaskType: {
      default: 'wu',
      type: String,
    },
  },
  data() {
    return {
      quickSelects: ['全', '大', '小', '单', '双', '清'],
      currentType: '',
      selectedNumber: [],
      showSelect: false,
    }
  },
  watch: {
    betInfo: {
      deep: true,
      handler(value) {
        this.selectedNumber = value[this.type] || []
        this.currentType = ''
      },
    },
  },
  mounted() {
    // if (this.betInfo[this.type] && this.betInfo[this.type].length > 0) {
    //   this.selectedNumber = this.betInfo[this.type]
    // }
  },
  methods: {
    handelQuickSelect(type) {
      this.currentType = type
      switch (type) {
        case '全':
          this.selectedNumber = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
          break
        case '大':
          this.selectedNumber = [5, 6, 7, 8, 9]
          break
        case '小':
          this.selectedNumber = [0, 1, 2, 3, 4]
          break
        case '单':
          this.selectedNumber = [1, 3, 5, 7, 9]
          break
        case '双':
          this.selectedNumber = [0, 2, 4, 6, 8]
          break
        case '清':
          this.selectedNumber = []
          break
        default:
          break
      }
      this.$emit('setData', { type: this.type, data: this.selectedNumber })
    },
    // 更新选中数据
    // updateSelectedNumber(list) {
    //   this.selectedNumber = list
    // },
    toggleSelect() {
      this.showSelect = !this.showSelect
    },
    changeSelectNumber(number) {
      const index = this.selectedNumber.indexOf(number)
      if (index !== -1) {
        this.selectedNumber.splice(index, 1) // 使用splice方法移除元素
      } else {
        this.selectedNumber.push(number)
      }
      this.$emit('setData', { type: this.type, data: this.selectedNumber, code: number.playCode })
    },
  },
}
</script>

<style scoped lang="less">
.bet-card {
  background: #212432;
  border: 0.5px solid #373b4d;
  box-shadow: 0 0 4px 0 #1c6f9d2b inset;
  height: 120px;
  margin-bottom: 5px;
  border-radius: 5px;
  display: flex;
  padding-top: 11px;
  padding-left: 22px;
  position: relative;
  .bet-title {
    color: #cfd1ff;
    display: flex;
    writing-mode: vertical-rl;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
    position: relative;
    span {
      position: relative;
      left: -14px;
    }
    i {
      background: url('@/assets/img/qixing/line.png') no-repeat;
      background-size: contain;
      width: 5px;
      height: 76px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.quick-select {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  &.show {
    ul {
      width: auto;
      background: #5a5cff;
    }
    .show-btn {
      border: unset;
      background: #5a5cff;
      border-radius: 0 10px 10px 0;
      b {
        background: #fff;
      }
    }
  }
  .show-btn {
    width: 18px;
    height: 48px;
    background: #2c2f42;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    border: 1px solid #343953;

    b {
      width: 4px;
      height: 4px;
      background: #585f81;
      border-radius: 50%;
      margin: 2px 0;
    }
  }
  ul {
    display: flex;
    align-items: center;
    color: #008ddc;
    overflow: hidden;
    width: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    height: 48px;
    background: #5a5cff;
    border-radius: 50px 0 0 50px;
    li {
      height: 24px;
      line-height: 24px;
      width: 40px;
      border-radius: 18px;
      // border: 1px solid #c2e8ff;
      margin-right: 10px;
      color: #fff;
      // &.active {
      //   background: radial-gradient(140.65% 140.65% at 77.94% 0%, #77d7ff 0%, #4d7afc 70.55%, #4385f8 99.98%);
      //   color: #fff;
      // }
    }
  }
}
.number {
  display: grid;
  color: #5e6994;
  grid-template-columns: repeat(5, 1fr); /* 5列 */
  gap: 10px 18px;
  li {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: url('@/assets/img/qixing/bet_btn_round.png');
    background-size: 100% 100%;
    border-color: unset;
    color: #a2abff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    &.active {
      background: url('@/assets/img/qixing/number-bg.png');
      background-size: 100% 100%;
      border-color: unset;
      color: #fff;
    }
  }
}
.mask-bet {
  height: 2.6rem;
  border-radius: 5px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}

.bet-content {
  display: flex;
  align-items: center;
}
</style>
